<!DOCTYPE html>
<html>
<head>
  <title>anime.js</title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link href="css/styles.css" rel="stylesheet">
</head>
<style>

  section {
    display: flex;
    flex-wrap: wrap;
    width: 22rem;
    height: 22rem;
  }

  div {
    width: 1.5rem;
    height: 1.5rem;
    background: #FFF;
  }

</style>
</head>
<body>
  <script src="../anime.js"></script>
  <script>

  var maxElements = 210;
  var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];

  var createElements = (function() {
    var sectionEl = document.createElement('section');
    for (var i = 0; i < maxElements; i++) {
      var el = document.createElement('div');
      el.style.background = colors[anime.random(0, 3)];
      sectionEl.appendChild(el);
    }
    document.body.appendChild(sectionEl);
  })();

  anime({
    targets: 'div',
    translateX: function() { return anime.random(-6, 6) + 'rem'; },
    translateY: function() { return anime.random(-6, 6) + 'rem'; },
    scale: function() { return anime.random(10, 20) / 10; },
    rotate: function() { return anime.random(-360, 360); },
    delay: function() { return 400 + anime.random(0, 500); },
    duration: function() { return anime.random(1000, 2000); },
    direction: 'alternate',
    loop: true
  });

  </script>
</body>
</html>
